<template>
  <div class="fileinfo">
    <el-container>
      <el-main>
        <div class="file">
          <el-table v-loading="loading" :data="filenames">
            <el-table-column label="文件名称" width="100px">
              <template #default="scope">
                <el-tooltip
                  class="box-item"
                  :content="scope.row.name"
                  placement="top-start"
                >
                  <strong class="filename"> {{ scope.row.name }}</strong>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="createAt"
              label="创建时间"
              style="width: 180px"
            >
              <template #default="scope">
                <strong> {{ moment(scope.row.createAt) }}</strong>
              </template>
            </el-table-column>
            <el-table-column label="选项">
              <template #default="scope">
                <el-button size="small" @click="handleDlow(scope.row.name)"
                  >下载</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row.name)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-aside width="200px">
        <el-upload
          class="avatar-uploader"
          :headers="headers"
          :show-file-list="false"
          :http-request="putinMirror"
        >
          <div>上传我的文件</div>
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-aside>
    </el-container>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

import LocalCache from "@/utils/cache";

import moment from "@/utils/dateFormat";

const store = useStore();
//文件处理
const putinMirror = (file) => {
  console.log(file, "file");
  let fileType = file.file.name.split(".");
  console.log(fileType, "fileType");
  if (fileType[fileType.length - 1] !== "zip") {
    ElMessage.warning("文件格式错误，仅支持.zip");
    return false;
  }
  // 校验文件大小是否满足
  let fileSize = file.file.size;
  //文件大小是否超出20G
  if (fileSize > 5 * 1024 * 1024 * 1024) {
    ElMessage.warning("上传文件大小不超过5G");
    return false;
  }
  const f = new FormData();
  f.append("file", file.file);
  f.append("userid", LocalCache.getCache("id"));
  store.dispatch("main/postfile", f);
};
//拿到文件名称
store.dispatch("main/getfilename", LocalCache.getCache("id"));
let filenames = computed(() => store.state.main.filenames);
console.log(filenames.value, "文件名称");
const loading = ref(!filenames.value);
const handleDlow = (name) => {
  console.log(name);
  let a = `http://localhost:8081/${name}/${LocalCache.getCache("id")}/download`;
  location.href = a;
};
const handleDelete = (name) => {
  console.log(name);
  store.dispatch("main/Deletefile", { name, id: LocalCache.getCache("id") });
};
</script>
  
  <style scoped lang="less">
.fileinfo {
  width: 100%;
  height: 75%;
  /deep/.el-container {
    width: 100%;
    height: 100%;

    .el-aside {
      height: 100%;
      text-align: center;
      line-height: 100%;
      position: relative;
      background: #f6f6f6;
      margin-right: 10px;
      .avatar-uploader {
        width: 112px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
.file {
  margin-left: 10px;
  > ul {
    padding: 0;
    > li {
      list-style: none;
      padding-bottom: 10px;
      border-bottom: 1px solid #f6f6f6;
      .dowfile {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .dowandend {
          display: flex;
          justify-content: space-between;
          .dow {
            width: 50px;
          }
        }
      }
    }
  }
  /deep/ .filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
            